<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--<form action="../test_cgi" method="post">
        姓:<br>
        <input type="text" name="firstname" value="0">
        <br>
        名:<br>
        <input type="text" name="lastname" value="0">
        <br><br>
        <input type="submit" value="submit">
    </form>
    点击提交，将会提交到test_cgi后端程序-->


    <form action="">
        <div>
            <label >用户名：</label>
            <input id="username" name="username" required>
        </div>

        <div>
            <label >密码：</label>
            <input id="password" type="password" required name="password">
        </div>

        <div>
            <button type="button" id="btn">提交</button>
        </div>
    </form>


    <script>

        //获取元素
        var btn = document.getElementById("btn");//获取按钮元素
        var usernameInput = document.getElementById("username");
        var passwordInput = document.getElementById("password");
        
        //添加点击事件
        btn.onclick = function(){

            var username = usernameInput.value;
            var password = passwordInput.value;

            console.log(username);
            console.log(password);
        }
    </script>
</body>

</html>